import { Callout, Steps, Tabs } from 'nextra/components'
import BadgeGroup, { UniverTypes } from '@/components/BadgeGroup'

# 使用 Facade API

<BadgeGroup values={[UniverTypes.GENERAL]} value={UniverTypes.GENERAL} />

Univer 的插件化能力非常强大，它几乎允许你对 Univer 的方方面面进行扩展。但在大多数情况下，过于灵活的扩展能力会使得开发者手足无措。因此我们提供了 `@univerjs/facade`，为 Univer 的用户提供一个更加简单易用的面板 API（Facade API）。

`@univerjs/facade` 适用于任何人，尤其是那些熟悉 Luckysheet 的老用户，或者只是想简单地使用 Univer 的功能而并不打算深度扩展的用户。使用 `@univerjs/facade`，你可以快速上手，轻松实现各种常见的增删改查功能。

本文档将详细介绍如何使用 `@univerjs/facade` 提供的 API，帮助你充分发挥 Univer 的潜力。如果你想查看所有的 Facade API，请参考 `@univerjs/facade` 的 [API 文档](/typedoc/@univerjs/facade/README)。通过学习和使用这些 API，你将能够更高效、更便捷地开发出功能强大的办公应用。

<Callout type="info" emoji="ℹ️">
  实际上，[Uniscript](/typedoc/@univerjs/uniscript/README) 也使用了 `@univerjs/facade`，因此你可以在 `@univerjs/uniscript` 创建的 Uniscript 面板中直接使用 `@univerjs/facade` 提供的 API。
</Callout>

## 安装

使用你的包管理器安装：

<Tabs items={['pnpm', 'npm']}>
  <Tabs.Tab label="pnpm">
    ```shell
    pnpm add @univerjs/facade
    ```
  </Tabs.Tab>
  <Tabs.Tab label="npm">
    ```shell
    npm install @univerjs/facade
    ```
  </Tabs.Tab>
</Tabs>

## 使用

`@univerjs/facade` 提供的 API 是对 `Univer` 实例的封装，因此你需要在创建了 `Univer` 实例之后，再用 `FUniver` 包裹这个实例：

```typescript
import { FUniver } from "@univerjs/facade";

const univerAPI = FUniver.newAPI(univer);
```

然后你就可以通过调用 `univerAPI` 的方法来使用 Univer 了，例如获取当前激活的 Workbook：

```typescript
univerAPI.getActiveWorkbook();
```

## 与服务端配合使用

如果你使用的功能包含了与服务端交互的部分，那么你需要将 `@univerjs/facade` 包替换成 `@univerjs-pro/facade` 才能调用与这些功能相关的 API。

`@univerjs-pro/facade` 的使用与 `@univerjs/facade` 完全相同，只需要将 `@univerjs/facade` 替换成 `@univerjs-pro/facade` 即可：

<Steps>
  ### 安装

  <Tabs items={['pnpm', 'npm']}>
    <Tabs.Tab label="pnpm">
      ```shell
      pnpm remove @univerjs/facade
      pnpm add @univerjs-pro/facade
      ```
    </Tabs.Tab>
    <Tabs.Tab label="npm">
      ```shell
      npm remove @univerjs/facade
      npm install @univerjs-pro/facade
      ```
    </Tabs.Tab>
  </Tabs>
 
  ### 替换
 
  ```diff
  - import { FUniver } from "@univerjs/facade";
  + import { FUniver } from "@univerjs-pro/facade";
 
  const univerAPI = FUniver.newAPI(univer);
  ```
</Steps>
